<template>
	<tab-bar class="tab-bar">
		<tab-bar-item path='/home' activeColor='blue'>
			<img slot='item-icon' src="~assets/img/tabbar/bar1-default.png" alt="">
			<img slot='item-icon-active' src="~assets/img/tabbar/bar1-active.png" alt="">
			<div slot='item-text'>首页</div>
		</tab-bar-item>
		<tab-bar-item path='/category'>
			<img slot='item-icon' src="~assets/img/tabbar/bar2-default.png" alt="">
			<img slot='item-icon-active' src="~assets/img/tabbar/bar2-active.png" alt="">
			<div slot='item-text'>分类</div>
		</tab-bar-item>
		<tab-bar-item path='/cart' activeColor='#995909'>
			<img slot='item-icon' src="~assets/img/tabbar/bar3-default.png" alt="">
			<img slot='item-icon-active' src="~assets/img/tabbar/bar3-active.png" alt="">
			<div slot='item-text'>购物车</div>
		</tab-bar-item>
		<tab-bar-item path='/profile' activeColor='skyblue'>
			<img slot='item-icon' src="~assets/img/tabbar/bar4-default.png" alt="">
			<img slot='item-icon-active' src="~assets/img/tabbar/bar4-active.png" alt="">
			<div slot='item-text'>我的</div>
		</tab-bar-item>
	</tab-bar>
</template>

<script>
	import TabBar from "components/common/tabbar/TabBar"
	import TabBarItem from "components/common/tabbar/TabBarItem"
	export default {
		data() {
			return {

			}
		},
		components: {
			TabBar,
			TabBarItem
		}
	}
</script>

<style>
  .tab-bar{
    z-index: 9;
  }
</style>
